import React, { Component } from 'react';
import {Card, Button, Modal} from 'antd';
import './ui.less';
class Modals extends Component {
    state = {
        visible1: false,
        visible2: false,
        visible3: false,
        visible4: false
    }
    handleModal = (type) => {
        console.log(type)
        this.setState({
            [type]: true
        })
    }
    handleOK = (type) => {
        this.setState({
            [type]: false
        })
    }
    handleCancel = (type) => {
        this.setState({
            [type]: false
        })
    }
    // 点击打开信息确认
    handleConfirm = (type) => {
        console.log(type)
        Modal[type]({
            title: 'Do you Want to delete these items?',
            content: 'Some descriptions',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            }
        })
    }
    render() {
        return (
            <div>
                <Card title="基础模态框">
                    <Button type="primary" onClick={() => this.handleModal('visible1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleModal('visible2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleModal('visible3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={() => this.handleModal('visible4')}>水平垂直居中</Button>
                </Card>
                <Modal  title="React"
                        visible={this.state.visible1}
                        onOk={() => this.handleOK('visible1')}
                        onCancel={() => this.handleCancel('visible1')}>
                    <p>欢迎学习react相关知识</p>
                </Modal>
                <Modal  title="React"
                        visible={this.state.visible2}
                        onOk={() => this.handleOK('visible2')}
                        onCancel={() => this.handleCancel('visible2')}
                        onText="OK"
                        cancelText="算了">
                    <p>欢迎学习react相关知识</p>
                </Modal>

                <Modal  title="React"
                        style={{top: 20}}
                        visible={this.state.visible3}
                        onOk={() => this.handleOK('visible3')}
                        onCancel={() => this.handleCancel('visible3')}>
                    <p>欢迎学习react相关知识</p>
                </Modal>
                <Modal  title="React"
                        visible={this.state.visible4}
                        onOk={() => this.handleOK('visible4')}
                        onCancel={() => this.handleCancel('visible4')}
                        centered={true}>
                    <p>欢迎学习react相关知识</p>
                </Modal>
                <Card title="信息确认框">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Cnfirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Warning</Button>
                </Card>
            </div>
        );
    }
}

export default Modals;